<template>
  <!-- <v-container> -->
  <v-container
  class="grey lighten-2"
  style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 返回按钮、题数 -->
    <v-row class="green mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">智 能 助 手</h3>
      </v-col>
      <v-col></v-col>
    </v-row>
    <!-- 聊天框 -->
    <!-- 1 -->
    <v-row>
      <v-avatar size="50" color="green" style="position:absolute;top:75px;left:5px;">
        <v-icon color="white">adb</v-icon>
      </v-avatar>
      <span style="position:absolute;top:80px;left:60px;width:16px;height:35px;margin-right:0px;border-width:0;border-style:solid;border-bottom-width:10px;border-radius:0 0 0 32px;color:white;"></span>
      <span style="position:absolute;top:80px;left:70px;border-radius:20px;display:inline-block;width:232px;height:210px;line-height:30px;word-wrap:break-word;word-break:break-all;float:left;text-align:left;" class="white px-5">
        是否遇到了以下问题？
        <br>
        <span
          @click="retain()" 
          class="mt-3 mb-n3" 
          style="color:orange;display:inline-block;height:60px;line-height:20px;"
        >绿色积分跟碳积分之间的转换比例是多少？</span>
        <br>
        <span style="color:orange;">绿色积分补领的相关规则</span>
        <br>
        <span style="color:orange;">绑卡时要注意些什么？</span>
        <br>
        <span style="color:orange;">如何兑换碳积分？</span>
        <br>
        <span style="color:orange;">绿色等级的规则说明</span>
      </span>
    </v-row>

    <!-- 2 -->
    <v-row v-show="showa">
      <v-avatar size="50" style="position:absolute;top:305px;right:5px;">
        <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
      </v-avatar>
      <span style="position:absolute;top:305px;right:60px;width:16px;height:35px;margin-right:0px;border-width:0;border-style:solid;border-bottom-width:10px;border-radius:0 0 32px 0;color:white;"></span>
      <span style="position:absolute;top:305px;right:70px;border-radius:20px;display:inline-block;width:232px;height:60px;line-height:30px;word-wrap:break-word;word-break:break-all;float:left;text-align:left;" class="white px-5">
        绿色积分跟碳积分之间的转换比例是多少？
      </span>
    </v-row>

    <!-- 3 -->
    <v-row v-if="model1==1">
      <v-avatar size="50" color="green" style="position:absolute;top:385px;left:5px;">
        <v-icon color="white">adb</v-icon>
      </v-avatar>
      <span style="position:absolute;top:385px;left:60px;width:16px;height:35px;margin-right:0px;border-width:0;border-style:solid;border-bottom-width:10px;border-radius:0 0 0 32px;color:white;"></span>
      <span style="position:absolute;top:385px;left:70px;border-radius:20px;display:inline-block;width:232px;height:60px;line-height:30px;word-wrap:break-word;word-break:break-all;float:left;text-align:left;" class="white px-5">
        100绿色积分=1碳积分，每月最高可兑换30个碳积分
      </span>
    </v-row>

    <!-- 4 -->
    <v-row v-show="showb">
      <v-avatar size="50" style="position:absolute;top:465px;right:5px;">
        <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
      </v-avatar>
      <span style="position:absolute;top:465px;right:60px;width:16px;height:35px;margin-right:0px;border-width:0;border-style:solid;border-bottom-width:10px;border-radius:0 0 32px 0;color:white;"></span>
      <span style="position:absolute;top:465px;right:70px;border-radius:20px;display:inline-block;width:232px;height:50px;line-height:50px;word-wrap:break-word;word-break:break-all;float:left;text-align:left;" class="white px-5">
        请问绿色积分可以补领吗？
      </span>
    </v-row>

    <!-- 5 -->
    <v-row v-if="model2==1">
      <v-avatar size="50" color="green" style="position:absolute;top:535px;left:5px;">
        <v-icon color="white">adb</v-icon>
      </v-avatar>
      <span style="position:absolute;top:535px;left:60px;width:16px;height:35px;margin-right:0px;border-width:0;border-style:solid;border-bottom-width:10px;border-radius:0 0 0 32px;color:white;"></span>
      <span style="position:absolute;top:535px;left:70px;border-radius:20px;display:inline-block;width:232px;height:120px;line-height:30px;word-wrap:break-word;word-break:break-all;float:left;text-align:left;" class="white px-5">
        支持最多领取近两日积分，如当天忘记领取积分，可在一键领取时补领近两日内所有积分。
      </span>
    </v-row>






    <!-- 去掉底部Banner的遮挡 -->
    <!-- <v-row>
      <span style="position:absolute;top:860px;display:inline-block;width:100%;height:75px;"></span>
    </v-row> -->

    <!-- 加载转转 -->
    <!-- <v-row v-if="model==1||model==2||model==3">
      <v-progress-circular
        indeterminate
        color="green"
        style="position:absolute;top:300px;left:130px;width:30px;"
      ></v-progress-circular>
    </v-row> -->

    <!-- 第一个回答的计时器 -->
    <v-row v-show="show">
      <v-carousel
        :continuous="continuous1"
        :cycle="cycle1"
        interval="1500"
        height="400"
        hide-delimiter-background
        show-arrows-on-hover
        v-model="model1"
      >
        <v-carousel-item>
          <div v-text="model1">Lv.0</div>
        </v-carousel-item>
        <v-carousel-item>
          <div v-text="model1">Lv.1</div>
        </v-carousel-item>
      </v-carousel>
    </v-row>

    <!-- 第二个回答的计时器 -->
    <v-row v-show="show">
      <v-carousel
        :continuous="continuous2"
        :cycle="cycle2"
        interval="1500"
        height="400"
        hide-delimiter-background
        show-arrows-on-hover
        v-model="model2"
      >
        <v-carousel-item>
          <div v-text="model2">Lv.0</div>
        </v-carousel-item>
        <v-carousel-item>
          <div v-text="model2">Lv.1</div>
        </v-carousel-item>
      </v-carousel>
    </v-row>
    

    <!-- 底部输入框 -->
    <span style="position:fixed;bottom:0px;left:0px;width:100%;;height:50px;" class="grey lighten-1">
      <span style="position:fixed;bottom:6px;left:10px;width:270px;;height:38px;">
        <v-text-field solo rounded dense clearable append-icon="sentiment_very_satisfied" v-model="text"></v-text-field>
      </span>
      <span style="position:fixed;bottom:7px;right:10px;width:64px;">
        <v-btn rounded @click="tain()">发送</v-btn>
      </span>
    </span>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      showa: false,
      showb: false,
      show: false,
      text: "",
      model1: 0,
      model2: 0,
      continuous1: true,
      continuous2: true,
      cycle1: false,
      cycle2: false,
    }
  },
  methods: {
    retain() {
      this.showa = true;
      this.text = "";
      this.continuous1 = false;
      this.cycle1 = true;
    },
    tain() {
      this.showb = true;
      this.text = "";
      this.continuous2 = false;
      this.cycle2 = true;
    },
  }
}
</script>

<style scoped>
</style>